<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>下拉菜单</title>
		<!-- 引入BootStrap的核心css文件 -->
		<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css"/>
		<!-- 引入Jquery核心js文件，需要在bootstrap的js之前引入 -->
		<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
		<!-- 引入BootStrap的核心js文件 -->
		<script src="bootstrap/js/bootstrap.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<!-- 
			下拉菜单
				1、使用一个类名为dropdown 或btn-group的div 包裹整个下拉框: 
				   <div class="dropdown"></div>
				2、默认向下dropdown，向上弹起加入 . dropup 即可
				3、使用button作为父菜单，使用类名: dropdown-toggle 和自定义data-toggle属性
				<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"></button>
				4、在button中 使用font 制作下拉箭头
					<span class="caret"></span>
				5、下拉菜单项使用一个ul列表，并且定义一个类名为“dropdown-menu
				6、分组分割线: <li>添加类名“divider”来实现添加下拉分隔线的功能
				7、分组标题: li 添加类名 “dropdown-header” 来实现分组的功能
				8、对齐方式:
					1)、dropdown-menu-left  左对齐 默认样式
					2)、dropdown-menu-right   右对齐
				9、激活状态（.active）和禁用状态（.disabled）
		 -->
		 
		 <!-- 使用一个类名为dropdown 或 btn-group的div 包裹整个下拉框；默认向下dropdown，向上弹起加入 . dropup 即可 -->
		<div class="dropdown">
			<!-- 使用button作为父菜单，使用类名: dropdown-toggle 和自定义data-toggle属性 -->
			<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">
				喜欢的频道
				<!-- 设置下拉箭头 -->
				<span class="caret"></span>
			</button>
			
			<!-- 下拉菜单项使用一个ul列表，并且定义一个类名为 dropdown-menu  -->
			<ul class="dropdown-menu">
				<!-- 分组标题: li 添加类名 “dropdown-header” 来实现分组的功能 -->
				<li class="dropdown-header"> -- 科普 --</li>
				<li><a href="http://tv.cctv.com/lm/ryzr/" target="_blank">人与自然</a></li>
				
				<!-- 分组分割线: <li>添加类名“divider”来实现添加下拉分隔线的功能 -->
				<li class="divider"></li>
				
				<li class="dropdown-header"> -- 搞笑 --</li>
				<li class="active"><a href="http://tv.cctv.com/lm/ryzr/" target="_blank">快乐大本营</a></li>
				<li class="disabled"><a href="http://tv.cctv.com/lm/ryzr/" target="_blank">欢乐喜剧人</a></li>
				<li><a href="http://tv.cctv.com/lm/ryzr/" target="_blank">生活大爆炸</a></li>
			</ul>
			
		</div>
		 
	</body>
</html>
